/* head 
Tips：line-height: 100% 意味着当前字体的大小的高度 并非父容器的高度 不可混为一谈
*/

.head {
    width: 100%;
    height: 41px;
    background-color: #32373e;
    line-height: 41px;
}


/* head 内容居中显示 */

.head .head-c {
    width: 1200px;
    height: 100%;
    margin: auto;
}


/* head左边 内容
TIPS:
    1.当前H1标签左浮动效果取消会导致，该标签独占一行
   
*/

.head-c .headleft {
    float: left;
    height: 41px;
}


/* head左边 内容 logo
Tips： 第一种显示图片的方式
    1.text-indent: -999em;
        该设置是为了显示出背景图片讲文字内容直接挤出显示区域
    2.overflow: hidden;
        承接上一步 讲挤出去的内容隐藏
*/

.head-c .headleft .logo {
    float: left;
    width: 43px;
    height: 31px;
    padding-top: 9px;
    margin-right: 43px;
}

.head-c .headleft .logo a {
    display: block;
    width: 43px;
    height: 21px;
    background: url(../images/logo.png) no-repeat 0 0;
    text-indent: -999em;
    overflow: hidden;
}


/* head左边内容 城市
    Tips：
        1.查看当前行高是否与父容器高度一致，否则垂直居中失效 ：line-height 
*/

.head-c .headleft .city {
    float: left;
    width: 111px;
    cursor: pointer;
}

.head-c .headleft .city span {
    margin-right: 12px;
    font-size: 14px;
    color: #0dca9f;
}

.head-c .headleft .city i {
    font-size: 12px;
    color: #afb5c0;
}

.head-c .headleft .city:hover i {
    color: #fff;
}


/* 左导航栏 
    Tips：在设置nav item的时候如果把属性设置给li 显示可以达到相同的效果
    但是点击区域会变成只有<a>标签文字的区域，所以需要整块点击就需要将设置放进<a>里
*/

.head-c .headleft .head_nav_left {
    /* 设置当前左边导航栏浮动确保当前模块与其他模块的抑制 */
    float: left;
}

.head-c .headleft .head_nav_left li {
    /* li浮动设置ul里元素水平 */
    float: left;
}

.head-c .headleft .head_nav_left li a {
    /* position 属性主要用于tips的右上角圆角展示 */
    position: relative;
    display: block;
    padding: 0 21px;
    color: #afb5c0;
}

.head-c .headleft .head_nav_left li a:hover {
    color: #fff;
}

.head-c .headleft .head_nav_left li a .tips {
    position: absolute;
    top: 3px;
    right: -2px;
    width: 29px;
    height: 18px;
    border-radius: 9px;
    background-color: #ff7452;
    font-size: 12px;
    color: #fff;
    /* line-height 设置行高 IFC text-align center 居中 */
    line-height: 18px;
    text-align: center;
}


/*右边导航栏
直接使用标签 排版 不使用 ul
*/

.head-c .headright {
    float: right;
}

.head-c .headright a {
    float: left;
    color: #afb5c0;
}

.head-c .headright a:hover {
    color: #fff;
}

.head-c .headright .upload {
    margin-right: 23px;
}

.head-c .headright .position {
    margin-right: 66px;
}

.head-c .headright .login {
    position: relative;
}


/**
 i标签的作用使用背景占位形式显示icon
 第二种显示图片的方式
**/

.head-c .headright .login i {
    position: absolute;
    top: 11px;
    left: -26px;
    width: 18px;
    height: 18px;
    background: url(../images/sprite_01.png) no-repeat -76px -136px
}

.head-c .headright .login:hover i {
    background-position: -76px -174px;
}

.head-c .headright span {
    float: left;
    padding: 0 8px;
    color: #5e5a50;
}

.head-c .headright .regist {
    margin-right: 52px;
}

.head-c .headright .app {
    position: relative;
    margin-right: 20px;
    color: #00c295;
}

.head-c .headright .app i {
    position: absolute;
    top: 11px;
    left: -26px;
    width: 18px;
    height: 18px;
    background: url(../images/sprite_01.png) no-repeat -64px -212px
}

.head-c .headright .app:hover i {
    background-position: -96px -212px;
}

.head-c .headright .app:hover {
    color: #81deaf;
}